<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./font/font.css">
    <link rel="stylesheet" href="./css/touris_index.css">
</head>

<body>
    <script src="./lib/jquery-1.11.3.js"></script>
    <script src="./lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./js/map/china.js"></script>

    <div id="mycentent">
        <header>
            <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
            <div class="querytext">
                <span>请输入回溯码：</span>
                <input type="text" id="backcode">
                <button class="mysubmit">提交</button>
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    留言板
                </button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content" id="mymodalcolor">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">请填写反馈意见</h4>
                            </div>
                            <div class="modal-body modalbody">
                                <p><label for="">名字:</label><input type="text" id="bname"></p>
                                <!-- <p><label for="">联系方式:</label><input type="text"></p> -->
                                <!-- <p><label for="">时间:</label><input type="text" id="btime"></p> -->
                                <p><label for="" class="textarealab">建议:</label><textarea class="textarealab" name=""
                                        cols="60" rows="10" id="bcon"></textarea></p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="addboard">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal回溯码 -->
                <div class="modal fade" id="myresore" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document" id="myresorecent">
                        <div class="modal-content" id="mymodalcolor">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title mygobackinput" id="myModalLabel">回溯码:</h4>
                            </div>
                            <div class="modal-body modalbody">
                                <div class="card">
                                    <div class="imgBox">

                                        <img src="./images/shouye/k111.jpeg" alt="">
                                        <span>种植养殖</span>
                                    </div>

                                    <div class="content" id="k1">
                                        <p>123</p>
                                    </div>
                                </div>
                                <span class="iconfont icon-xiangyou"></span>
                                <div class="card">
                                    <div class="imgBox">

                                        <img src="./images/shouye/k2.jpeg" alt="">
                                        <span>采摘收购</span>
                                    </div>
                                    <div class="content" id="k2">
                                        <p>123</p>
                                    </div>
                                </div>
                                <span class="iconfont icon-xiangyou"></span>
                                <div class="card">
                                    <div class="imgBox">

                                        <img src="./images/shouye/k3.jpeg" alt="">
                                        <span>运输入库</span>
                                    </div>
                                    <div class="content" id="k3">
                                        <p>123</p>
                                    </div>
                                </div>
                                <span class="iconfont icon-xiangyou"></span>
                                <div class="card">
                                    <div class="imgBox">

                                        <img src="./images/shouye/k5.jpeg" alt="">
                                        <span>包装销售</span>
                                    </div>
                                    <div class="content" id="k4">
                                        <p>123</p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <section class="mainbox">
            <div class="column">

                <div class="map">
                    <div class="chart"></div>
                    <div class="map1"></div>

                    <div class="map2"></div>
                    <div class="map3"></div>

                </div>


            </div>
            <div class="column">
                <div class="panel">
                    <h1>公司简介</h1>
                    <p class="pwite">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;食品安全已经成为当下最值得关注的事情。请设计并开发一套基于web的管理系统，从食品种植、到食品销售、加工到被监管单位用户等级动态管理、地理分布、再到日常巡查监管以及监管人员绩效考核等各个方面，覆盖食品监管部门门、工商管理部门的业务需求。抓住流通环节食品安全监管工作的关键问题和难点，实现各级监管部门、监管人员、食品经营者之间快速、准确、流畅的信息互动。
                    </p>
                </div>
                <div class="panel bar1">
                    <h1>销售排行榜--TOP5</h1>
                    <div class="chart"></div>
                    <!-- <div class="panel-footer"></div> -->
                </div>
                <!-- <div class="panel line1">
                    <h2>产地分布</h2>
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div> -->
            </div>
        </section>
    </div>

    <!-- <script src="./js/map/jquery.js"></script> -->
    <script src="./js/map/flexible.js"></script>
    <script src="./js/map/echarts.min.js"></script>
    <script src="./js/map/index.js"></script>
    <script src="./js/map/china.js"></script>

    <script src="./js/map/myMap.js"></script>
    <script>
        var t = null;
        var y
        var mt
        var day
        t = setTimeout(time, 0); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            y = dt.getFullYear();
            mt = dt.getMonth() + 1;
            day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
        $('#whenclick').click(function () {
            $('#whenclick').addClass("btnclick");

        })

        // 新增留言板
        $('#addboard').click(() => {
            if (mt < 10) {
                mt = '0' + mt
            }
            if (day < 10) {
                day = '0' + day
            }
            let btime = `${y}-${mt}-${day}`
            // console.log($('#bname').val());
            let isnotname
            if ($('#bname').val() == '') {
                isnotname = 1
            } else {
                isnotname = 0
            }
            $.ajax({
                url: '/addboard',
                method: 'post',
                data: {
                    isnotname: isnotname,
                    b_name: $('#bname').val(),
                    b_time: btime,
                    b_con: $('#bcon').val()
                },
                success: (res) => {
                    console.log(res);
                    $('#myModal').modal('toggle')
                }
            })
        })
        // 回溯码
        $('.mysubmit').click(function () {
            $('#myresore').modal('toggle')
            $.ajax({
                url: '/qbackcode',
                data: {
                    backcode: $('#backcode').val()
                },
                success: (res) => {
                    console.log(res);
                    $('.mygobackinput').text(`回溯码：${res.data[0].销售单号}`)
                    $('#k4').html(`
                    <p>生产日期：${res.data[0].p_date.substring(0, 10)}</p>
                    <p>买家名称：${res.data[0].用户名称}</p>
                    <p>销售地点：${res.data[0].销售地点}</p>
                    <p>销售方式：${res.data[0].销售方式}</p>
                    <p>包装方式：${res.data[0].p_package}</p>
                    `)
                    $('#k3').html(`
                    <p>仓库地址：${res.data[0].发货地址}</p>
                    <p>运输方式：${res.data[0].t_methed}</p>
                    <p>保质期：${res.data[0].p_pro}</p>
                    <p>运输人员是否有健康证：${res.data[0].p_health}</p>
                    <p>运输人员疫苗接种情况：${res.data[0].p_condition}</p>
                    `)
                    $('#k2').html(`
                    <p>采摘\屠宰时间：${res.data[0].g_time}</p>
                    
                    `)
                    $('#k1').html(`
                    <p>商品名称：${res.data[0].p_name_id}</p>
                    <p>商品来源：${res.data[0].g_source}</p>
                    <p>出产地：${res.data[0].p_name}</p>
                    <p>种植\养殖方式：${res.data[0].b_way}</p>
                    
                    `)

                }
            })

        })
    </script>

</body>